<template>
  <div class="">
    <div class="">
      <SearchComp :searchForm="searchForm" :searchData="queryString" :searchAction="searchAction"></SearchComp>
    </div>
    <div class="m-t">
      <div class="btnStyle flex-between ">
        <ButtonComp :buttonData="buttonData" />
        <el-button type="primary" size="small">数据统计</el-button>
      </div>
      <TableCompEle class="m-t" ref="multipleTable" :tableData="tableData" :tableConfig="tableConfig" :tableAction="tableAction" :isSelect="true"
        :isIndex="true" :isShowPage="true" :queryParams="queryParams" @getPagination="getList" @handleSelectionChange="handleSelectionChange">
      </TableCompEle>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      multipleSelection: [],
      queryParams: {
        total: 0,
        currentPage: 1,
        pageSize: 10
      },

      buttonData: [
        {
          kind: 'button',
          label: '新建',
          plain: false,
          size: 'small',
          type: 'primary',
          click: () => {
            let obj = {
              title: '新建',
              isEdit: false
            }
            console.log('====================================')
            console.log(obj)
            console.log('====================================')
          }
        },
        {
          kind: 'button',
          label: '导入',
          plain: false,
          size: 'small',
          type: 'primary',
          click: () => { }
        },
        {
          kind: 'button',
          label: '导出',
          plain: false,
          size: 'small',
          type: 'primary',
          click: () => { }
        },
        {
          kind: 'button',
          label: '批量删除',
          plain: false,
          size: 'small',
          type: 'danger',
          click: () => {
            if (this.multipleSelection.length == 0) {
              this.$message({
                type: 'warning',
                message: '请选择要删除的数据'
              })
              return
            }
            const ids = []
            this.multipleSelection.forEach(items => {
              ids.push(items.id)
            })
            this.$confirm(`确定要删除吗？`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
              .then(() => {
                console.log('====================================')
                console.log(1)
                console.log('====================================')
              })
              .catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消'
                })
              })
          }
        }
      ],
      tableData: [{}],
      tableConfig: [
        {
          prop: 'name',
          label: '研究指南名称'
        },
        {
          prop: 'fullName',
          label: '年度'
        },
        {
          prop: 'roleName',
          label: '指南预算'
        },
        {
          prop: 'roleName2',
          label: '文件'
        },
        {
          prop: 'roleName3',
          label: '发布单位'
        },
        {
          prop: 'roleName4',
          label: '状态'
        }
      ],
      tableAction: {
        align: () => 'center',
        width: () => String(60 * 6),
        operations: [
          {
            label: '提交',
            isLink: true,
            type: 'primary',
            method: row => {
              this.deleteFun(row)
            }
          },
          {
            label: '修改',
            isLink: true,
            type: 'primary',
            method: row => {
              let obj = {
                title: '修改',
                isEdit: true,
                row
              }
              console.log('====================================')
              console.log(obj)
              console.log('====================================')
            }
          },
          {
            label: '审批',
            isLink: true,
            type: 'primary',
            method: row => {
              this.deleteFun(row)
            }
          },
          {
            label: '发布',
            isLink: true,
            type: 'primary',
            method: row => {
              this.deleteFun(row)
            }
          },
          {
            label: '下载',
            isLink: true,
            type: 'primary',
            method: row => {
              this.deleteFun(row)
            }
          },
          {
            label: '查看',
            isLink: true,
            type: 'primary',
            method: row => {
              this.deleteFun(row)
            }
          },
          {
            label: '删除',
            isLink: true,
            type: 'danger',
            method: row => {
              this.deleteFun(row)
            }
          }
        ]
      },
      queryString: {
        name: '',
        roleId: ''
      },
      searchForm: {
        changeMethod: () => this.getList(),
        formData: [
          {
            type: 'Input',
            label: '指南名称',
            prop: 'userName',
            clearable: true,
            icon: 'el-icon-search',
            placeholder: '请输入指南名称'
          },
          {
            type: 'Select',
            label: '创建时间',
            prop: 'roleId',
            clearable: true,
            icon: 'el-icon-search',
            placeholder: '创建时间',
            options: [
              {
                value: 1,
                label: 22
              }
            ]
          }
        ]
      },
      searchAction: [
        {
          label: '查询',
          type: 'primary',
          handle: () => {
            this.getList()
          }
        },
        {
          label: '重置',
          type: 'primary',
          plain: true,
          handle: () => {
            this.queryString = {
              userName: '',
              roleId: '',
              sort: ''
            }
            this.getList()
          }
        }
      ]
    }
  },
  methods: {
    getList() {
      // getPageList({
      //   currentPage: this.queryParams.currentPage,
      //   pageSize: this.queryParams.pageSize,
      //   queryString: this.queryString
      // }).then(res => {
      //   this.queryParams.total = res.total
      //   this.tableData = res.rows || []
      // })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    deleteFun() {
      this.$confirm(`确定要删除当前用户吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // deleteFunApi({
          //   ids: [row.id]
          // }).then(() => {
          //   this.getList()
          // })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    }
  }
}
</script>

<style lang="less" scoped>
</style>